<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_自定义JS对象</title>
</head>
<body>
<table border="1">
    <tr>
        <td>商品名称</td>
        <td>商品价格</td>
        <td>商品库存</td>
    </tr>
</table>

<script>
    let productArr = [
        {title:'苹果',price:2000,stock:100},
        {title:'华为',price:5000,stock:200},
        {title:'小米',price:3000,stock:300}
        ,{title:'三星',price:4000,stock:400}
    ]

    let tableE = document.querySelector('table');

    for(let i=0;i<productArr.length;i++){
        let trE = document.createElement('tr');
        let td1 = document.createElement('td');
        let td2 = document.createElement('td');
        let td3 = document.createElement('td');

        td1.innerHTML = productArr[i].title;
        td2.innerHTML = productArr[i].price;
        td3.innerHTML = productArr[i].stock;

        trE.append(td1,td2,td3);

        tableE.append(trE);
    }

</script>

</body>
</html>